// 编译日志弹窗
import React from 'react';
import PropTypes from 'prop-types';
import { Dialog, Field } from '@teamix/ui';
import ListLoading from 'atComponents/ListLoading';
import ListEmpty from 'atComponents/ListEmpty';
import './index.scss';
import exceed from 'utils/apimap';
import intl from '../../locale';
// import hljs from 'utils/hl.js';

const prefix = 'compile-log-dialog';

export default class ProjectModal extends React.Component {
  static propTypes = {
    trigger: PropTypes.object,
    closeModal: PropTypes.object,
    build: PropTypes.object,
    projectId: PropTypes.number,
  };

  static defaultProps = {
    trigger: null,
    closeModal: () => {},
    build: {},
    projectId: '',
  };

  constructor(props) {
    super(props);
    this.field = new Field();
    this.state = {
      blob: ' ',
      isLoading: true,
    };
  }

  static getDerivedStateFromProps(props) {
    if (props.trigger) {
      return {};
    }
    return {
      isModalOpen: props.isModalOpen,
    };
  }

  componentDidMount() {
    this.getBlob(null, (blob) => {
      this.field.setValue('content', blob);
    });
  }

  // 获取文件内容
  // 接口见：http://gitlab.alibaba-inc.com/help/api/repositories.md#raw-file-content
  getBlob = (path, cb) => {
    const { pathResource } = window.FORCE;
    const { projectId, build } = this.props;

    exceed
      .fetch({
        api: 'projects.build.single.log',
        params: { project_id: projectId || pathResource.id, build_id: build.id },
      })
      .then((result) => {
        this.setState({
          blob: result.log || '',
          isLoading: false,
          successful: result.successful,
        });

        cb && cb(result.log);
      });
  };

  showModal = () => {
    this.setState({
      isModalOpen: true,
    });
  };

  onClose = () => {
    this.setState({
      isModalOpen: false,
    });

    this.props.closeModal();
  };

  renderBlobContentJsx() {
    const { blob } = this.state;
    const contentArr = blob ? blob.split('\n') : [];
    return (
      <div className={`${prefix}-content`}>
        {contentArr.map((item) => {
          return <div>{item}</div>;
        })}
      </div>
    );
  }

  renderContent = () => {
    const { blob, successful } = this.state;
    if (successful === 'true' && blob) {
      return <div className={`${prefix}-content`}>{this.renderBlobContentJsx()}</div>;
    } else {
      return (
        <div className={`${prefix}-fail`}>
          <ListEmpty
            image="none"
            content={intl.get({
              id: 'code-assets.components.compileLogModal.TheServiceIsAbnormalPlease',
              defaultMessage: '服务运行异常，请稍后重试或联系技术支持处理',
            })}
          />
        </div>
      );
    }
  };

  render() {
    const { isLoading } = this.state;
    return (
      <React.Fragment>
        {this.state.isModalOpen ? (
          <Dialog
            className={`${prefix}`}
            title={intl.get({
              id: 'code-assets.components.compileLogModal.ErrorLogs',
              defaultMessage: '错误日志',
            })}
            visible
            style={{ width: 628 }}
            onClose={this.onClose}
            footer={false}
          >
            {isLoading ? <ListLoading /> : this.renderContent()}
          </Dialog>
        ) : null}
        {!!this.props.trigger &&
          React.cloneElement(this.props.trigger, {
            onClick: (e) => {
              this.props.trigger.props.onClick && this.props.trigger.props.onClick(e);
              this.showModal();
            },
          })}
      </React.Fragment>
    );
  }
}
